<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;"
      name="viewport"
    />
    <title>子项目导航</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      body {
        padding: 16px;
      }
      h1 {
        margin-bottom: 18px;
      }
      a {
        display: block;
        margin-bottom: 6px;
      }
    </style>
  </head>

  <body>
    <h1>多页面菜单</h1>
    <script>
      function loadJSON(callback) {
        var xhr = new XMLHttpRequest()
        xhr.overrideMimeType('application/json')
        xhr.open('GET', '/multiPages.json', true)
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4 && xhr.status === 200) {
            callback(JSON.parse(xhr.responseText))
          }
        }
        xhr.send(null)
      }

      loadJSON(function (data) {
        data.forEach((item) => {
          console.log(item)
          const link = document.createElement('a')
          link.href = `./${item.chunk}/index.html`
          link.textContent = `${item.chunk} | ${item.chunkName}` // 设置显示的文本内容
          // 将 <a> 元素追加到容器元素中
          document.body.appendChild(link)
        })
      })
    </script>
  </body>
</html>
